<script setup lang="ts">
import { ref } from "vue";
import { formRules } from "./utils/rule";
import { FormProps } from "./utils/types";
import ReCol from "@/components/ReCol";
import UploadImg from "@/components/UploadImg/index.vue";
import { usePublicHooks } from "@/views/hooks";
const { switchStyle } = usePublicHooks();
const props = withDefaults(defineProps<FormProps>(), {
  formInline: () => ({
    id: null,
    title: "",
    imageUrl: "",
    displayOrder: 99,
    isActive: true,
    topup: 1
  })
});

const ruleFormRef = ref();
const newFormInline = ref(props.formInline);

function getRef() {
  return ruleFormRef.value;
}
function handleChangePhoto(file, key) {
  console.log(file, key);
  newFormInline.value[key] = file;
}
defineExpose({ getRef });
</script>

<template>
  <el-form
    ref="ruleFormRef"
    :model="newFormInline"
    label-position="left"
    :rules="formRules"
    label-width="95px"
  >
    <el-row :gutter="30">
      <re-col :value="24" :xs="24" :sm="24">
        <el-form-item label="轮播图名称" prop="title">
          <el-input
            v-model="newFormInline.title"
            clearable
            placeholder="请输入轮播图名称"
          />
        </el-form-item>
      </re-col>
      <re-col :value="24" :xs="24" :sm="24">
        <el-form-item label="链接地址" prop="linkUrl">
          <el-input
            v-model="newFormInline.linkUrl"
            clearable
            placeholder="请输入链接地址"
          />
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="排序">
          <el-input-number
            v-model="newFormInline.displayOrder"
            :min="1"
            :max="9999"
            controls-position="right"
          />
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="有效状态" prop="isActive">
          <el-select v-model="newFormInline.isActive" placeholder="请选择状态">
            <el-option label="允许" :value="true" />
            <el-option label="禁止" :value="false" />
          </el-select> </el-form-item
      ></re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="轮播图" label-position="top">
          <div class="flex flex-col">
            <UploadImg
              v-model:model-value="newFormInline.imageUrl"
              :width="560"
              @change="handleChangePhoto($event, 'imageUrl')"
            />
            <div class="flex">
              <div class="text-[12px]">
                (只能上传jpg/png文件，且不超过500kb)
              </div>
            </div>
          </div>
        </el-form-item>
      </re-col>
    </el-row>
  </el-form>
</template>
